<template>
  <view class="panel fresh">
    <view class="title">
      新鲜好物
      <navigator
      style="font-size: 14px"
        hover-class="none"
        class="more"
        url="/pages/recommend/index?type=5"
        >更多</navigator
      >
    </view>
    <view class="cards">
      <navigator
        hover-class="none"
        :url="`/pages/goods/index?id=${item.id}`"
        v-for="item in freshArr"
        :key="item.id"
      >
        <image mode="aspectFit" :src="item.picture"></image>
        <view class="name">{{ item.name }}</view>
        <view class="price" style="color: red">
          <text class="small">¥</text>{{ item.price }}
        </view>
      </navigator>
    </view>
  </view>
</template>

<script setup>
import { getFresh } from "@/api/home";
import { onMounted, ref } from "vue";
const freshArr = ref([])
onMounted(async () => {
  const res = await getFresh();
  freshArr.value = res.result
});
</script>

<style scoped lang="scss">
.fresh{
  .title{
    display: flex;
    justify-content: space-between;
    padding: 0 20px 20px 20px;
    font-size: 16px;
  }
  .cards{
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    navigator{
      text-align: center;
    }
    image{
      height: 72px;
      width: 72px;
    }
  }
}
.name{
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  padding: 5px 0;
  font-size: 12px;
  width: 72px;
}
</style>